{% from 'macros/icon.njk' import icon with context %}

<footer class="type--footer gap-top-1000 lg:pad-left-600 lg:pad-right-600" data-side-nav-inert data-search-inert>

  {% if not isDevsite %}
    <div class="pad-top-600 pad-bottom-600 pad-left-400 pad-right-400 hairline-bottom lg:pad-left-0 lg:pad-right-0">
      <div class="display-flex direction-column lg:direction-row lg:align-center">
        <div class="footer__heading">{{ 'i18n.footer.follow_us' | i18n(locale) }}</div>
        <div class="display-flex color-secondary-text gap-top-300 lg:gap-top-0">
          <a href="https://www.youtube.com/user/ChromeDevelopers" class="display-inline-flex color-secondary-text lg:gap-left-400" aria-label="{{ 'i18n.footer.youtube' | i18n(locale) }}">
            {{ icon('youtube', {hidden: true}) }}
          </a>
          <a href="https://twitter.com/ChromiumDev" class="display-inline-flex color-secondary-text gap-left-400" aria-label="{{ 'i18n.footer.twitter' | i18n(locale) }}">
            {{ icon('twitter', {hidden: true}) }}
          </a>
        </div>
      </div>
    </div>
  {% endif %}

  <div class="pad-top-600 pad-bottom-600 pad-left-400 pad-right-400 hairline-bottom  lg:pad-left-0 lg:pad-right-0">
    <div class="display-flex direction-column lg:direction-row justify-content-between">
      <div class="footer__stack stack-recursive flex-1">
        <div class="footer__heading">{{ 'i18n.footer.contribute' | i18n(locale) }}</div>
        <ul class="pad-0 gap-bottom-0" role="list">
          <li>
            <a class="footer__link" href="https://github.com/GoogleChrome/developer.chrome.com/issues/new?assignees=&labels=bug&template=bug_report.md&title=">
              {{ 'i18n.footer.file_a_bug' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://github.com/GoogleChrome/developer.chrome.com/">
              {{ 'i18n.footer.view_source' | i18n(locale) }}
            </a>
          </li>
        </ul>
      </div>

      <div class="footer__stack stack-recursive flex-1">
        <div class="footer__heading">{{ 'i18n.footer.related_content' | i18n(locale) }}</div>
        <ul class="pad-0 gap-bottom-0" role="list">
          <li>
            <a class="footer__link" href="https://web.dev/">
              {{ 'i18n.footer.web_dev' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://web.dev/case-studies">
              {{ 'i18n.footer.case_studies' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://web.dev/shows">
              {{ 'i18n.footer.podcasts' | i18n(locale) }}
            </a>
          </li>
        </ul>
      </div>

      <div class="footer__stack stack-recursive flex-1">
        <div class="footer__heading">{{ 'i18n.footer.connect' | i18n(locale) }}</div>
        <ul class="pad-0 gap-bottom-0" role="list">
          <li>
            <a class="footer__link" href="https://twitter.com/chromiumdev/">
              {{ 'i18n.footer.twitter' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://www.youtube.com/user/ChromeDevelopers">
              {{ 'i18n.footer.youtube' | i18n(locale) }}
            </a>
          </li>
          <li>
            <a class="footer__link" href="https://github.com/googlechrome">
              {{ 'i18n.footer.github' | i18n(locale) }}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="pad-top-600 pad-bottom-600 pad-left-400 pad-right-400  lg:pad-left-0 lg:pad-right-0">
    <div class="display-flex direction-column lg:direction-row align-start lg:align-center">
      <svg aria-label="Google for Developers" width="180" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 886 96">
        <path fill="#5f6368" d="M342.32 6.41c3.07 0 5.58.52 7.54 1.56l-2.3 7.45a10.9 10.9 0 0 0-4.97-1.1c-2.09 0-3.79.72-5.11 2.16-1.32 1.44-1.98 3.36-1.98 5.75v5.7h11.78v7.73H335.5v37.35h-8.46V35.66h-8.46v-7.73h8.46V21.4c0-4.48 1.43-8.1 4.28-10.86 2.85-2.76 6.52-4.14 10.99-4.14ZM349.29 50.48c0-6.93 2.18-12.66 6.53-17.2 4.42-4.54 9.97-6.81 16.65-6.81s12.21 2.27 16.56 6.81c4.42 4.54 6.62 10.27 6.62 17.2s-2.21 12.73-6.62 17.2c-4.36 4.54-9.88 6.81-16.56 6.81s-12.24-2.27-16.65-6.81c-4.36-4.54-6.53-10.27-6.53-17.2Zm8.46 0c0 4.85 1.41 8.77 4.23 11.78 2.82 3.01 6.32 4.51 10.49 4.51s7.67-1.5 10.49-4.51c2.82-3 4.23-6.93 4.23-11.78s-1.41-8.68-4.23-11.68c-2.88-3.07-6.38-4.6-10.49-4.6s-7.61 1.53-10.49 4.6c-2.82 3.01-4.23 6.9-4.23 11.68ZM410.13 73.02h-8.46V27.94h8.1v7.36h.37c.86-2.39 2.62-4.43 5.29-6.12 2.67-1.69 5.29-2.53 7.87-2.53s4.54.37 6.26 1.1l-2.58 8.19c-1.04-.43-2.7-.64-4.97-.64-3.19 0-5.97 1.29-8.33 3.86a12.93 12.93 0 0 0-3.54 9.02v24.84ZM456.77 73.02V7.15h20.15c10.06 0 18.14 3.04 24.24 9.11 6.1 6.07 9.15 14.02 9.15 23.83s-3.05 17.83-9.15 23.87c-6.1 6.04-14.18 9.06-24.24 9.06h-20.15Zm8.46-57.78v49.68h11.68c7.67 0 13.71-2.19 18.12-6.58 4.42-4.38 6.62-10.47 6.62-18.26s-2.21-13.8-6.62-18.22c-4.42-4.42-10.46-6.62-18.12-6.62h-11.68ZM537.78 74.49c-6.62 0-12.08-2.27-16.38-6.81-4.29-4.54-6.44-10.27-6.44-17.2s2.08-12.59 6.26-17.16c4.17-4.57 9.51-6.85 16.01-6.85s12.01 2.16 15.96 6.49c3.96 4.32 5.93 10.38 5.93 18.17l-.09.92h-35.42c.12 4.42 1.59 7.97 4.42 10.67a14.11 14.11 0 0 0 10.12 4.05c5.4 0 9.63-2.7 12.7-8.1l7.54 3.68c-2.02 3.8-4.83 6.78-8.42 8.92s-7.65 3.22-12.19 3.22Zm-13.52-29.44h25.85a11.22 11.22 0 0 0-3.82-7.77c-2.3-2.05-5.38-3.08-9.25-3.08-3.19 0-5.93.98-8.23 2.94a14.01 14.01 0 0 0-4.55 7.91ZM585.33 73.02h-8.46l-18.22-45.08h9.2L581.1 62.9h.18l13.43-34.96h9.02l-18.4 45.08ZM625.96 74.49c-6.62 0-12.08-2.27-16.38-6.81-4.29-4.54-6.44-10.27-6.44-17.2s2.08-12.59 6.26-17.16c4.17-4.57 9.51-6.85 16.01-6.85s12.01 2.16 15.96 6.49c3.96 4.32 5.93 10.38 5.93 18.17l-.09.92h-35.42c.12 4.42 1.59 7.97 4.42 10.67a14.11 14.11 0 0 0 10.12 4.05c5.4 0 9.63-2.7 12.7-8.1l7.54 3.68c-2.02 3.8-4.83 6.78-8.42 8.92s-7.65 3.22-12.19 3.22Zm-13.52-29.44h25.85a11.22 11.22 0 0 0-3.82-7.77c-2.3-2.05-5.38-3.08-9.25-3.08-3.19 0-5.93.98-8.23 2.94a14.01 14.01 0 0 0-4.55 7.91ZM661.78 7.15v65.87h-8.46V7.15h8.46ZM667.9 50.48c0-6.93 2.18-12.66 6.53-17.2 4.42-4.54 9.97-6.81 16.65-6.81s12.21 2.27 16.56 6.81c4.42 4.54 6.62 10.27 6.62 17.2s-2.21 12.73-6.62 17.2c-4.36 4.54-9.88 6.81-16.56 6.81s-12.24-2.27-16.65-6.81c-4.36-4.54-6.53-10.27-6.53-17.2Zm8.46 0c0 4.85 1.41 8.77 4.23 11.78 2.82 3.01 6.32 4.51 10.49 4.51s7.67-1.5 10.49-4.51c2.82-3 4.23-6.93 4.23-11.78s-1.41-8.68-4.23-11.68c-2.88-3.07-6.38-4.6-10.49-4.6s-7.61 1.53-10.49 4.6c-2.82 3.01-4.23 6.9-4.23 11.68ZM743.93 74.49c-3.31 0-6.33-.71-9.06-2.12a15.83 15.83 0 0 1-6.3-5.61h-.37l.37 6.26v19.87h-8.46V27.94h8.1v6.26h.37a15.83 15.83 0 0 1 6.3-5.61 19.45 19.45 0 0 1 9.06-2.12c5.95 0 10.98 2.33 15.09 6.99 4.23 4.72 6.35 10.4 6.35 17.02s-2.12 12.36-6.35 17.02c-4.11 4.66-9.14 6.99-15.09 6.99Zm-1.38-7.73c4.05 0 7.45-1.53 10.21-4.6 2.76-3 4.14-6.9 4.14-11.68s-1.38-8.62-4.14-11.68c-2.76-3.07-6.16-4.6-10.21-4.6s-7.54 1.53-10.3 4.6c-2.7 3.07-4.05 6.96-4.05 11.68s1.35 8.71 4.05 11.78a13.4 13.4 0 0 0 10.3 4.51ZM791.88 74.49c-6.62 0-12.08-2.27-16.38-6.81-4.29-4.54-6.44-10.27-6.44-17.2s2.08-12.59 6.26-17.16c4.17-4.57 9.51-6.85 16.01-6.85s12.01 2.16 15.96 6.49c3.96 4.32 5.93 10.38 5.93 18.17l-.09.92h-35.42c.12 4.42 1.59 7.97 4.42 10.67a14.11 14.11 0 0 0 10.12 4.05c5.4 0 9.63-2.7 12.7-8.1l7.54 3.68c-2.02 3.8-4.83 6.78-8.42 8.92s-7.65 3.22-12.19 3.22Zm-13.52-29.44h25.85a11.22 11.22 0 0 0-3.82-7.77c-2.3-2.05-5.38-3.08-9.25-3.08-3.19 0-5.93.98-8.23 2.94a14.01 14.01 0 0 0-4.55 7.91ZM827.75 73.02h-8.46V27.94h8.1v7.36h.37c.86-2.39 2.62-4.43 5.29-6.12 2.67-1.69 5.29-2.53 7.87-2.53s4.54.37 6.26 1.1l-2.58 8.19c-1.04-.43-2.7-.64-4.97-.64-3.19 0-5.97 1.29-8.33 3.86a12.93 12.93 0 0 0-3.54 9.02v24.84ZM885.03 60.51c0 3.93-1.72 7.24-5.15 9.94-3.44 2.7-7.76 4.05-12.97 4.05-4.54 0-8.53-1.18-11.96-3.54a19.46 19.46 0 0 1-7.36-9.34l7.54-3.22c1.1 2.7 2.71 4.8 4.83 6.3a11.76 11.76 0 0 0 6.95 2.25c2.7 0 4.95-.58 6.76-1.75 1.81-1.16 2.71-2.54 2.71-4.14 0-2.88-2.21-5-6.62-6.35l-7.73-1.93c-8.77-2.21-13.16-6.44-13.16-12.7 0-4.11 1.67-7.41 5.01-9.89 3.34-2.48 7.62-3.73 12.83-3.73 3.99 0 7.59.95 10.81 2.85a15.5 15.5 0 0 1 6.76 7.64l-7.54 3.13a9.46 9.46 0 0 0-4.19-4.46 13.15 13.15 0 0 0-6.49-1.61c-2.21 0-4.19.55-5.93 1.66s-2.62 2.45-2.62 4.05c0 2.58 2.42 4.42 7.27 5.52l6.81 1.75c8.95 2.21 13.43 6.72 13.43 13.52Z"/>
        <path fill="#4285f4" d="M37.76 74.48C17.24 74.48 0 57.76 0 37.24S17.24 0 37.76 0c11.35 0 19.42 4.45 25.5 10.26l-7.17 7.17a25.91 25.91 0 0 0-18.33-7.27c-14.97 0-26.68 12.08-26.68 27.07s11.71 27.06 26.68 27.06c9.71 0 15.25-3.9 18.79-7.45 2.9-2.91 4.81-7.08 5.54-12.81H37.5V33.86h34.48c.36 1.82.54 4 .54 6.36 0 7.63-2.09 17.08-8.8 23.8-6.53 6.81-14.88 10.44-25.96 10.44Z"/>
        <path fill="#ea4335" d="M124.16 50.5c0 13.81-10.79 23.98-24.02 23.98S76.12 64.31 76.12 50.5s10.79-23.98 24.02-23.98 24.02 10.08 24.02 23.98Zm-10.52 0c0-8.63-6.26-14.53-13.51-14.53s-13.51 5.9-13.51 14.53 6.26 14.53 13.51 14.53 13.51-5.99 13.51-14.53Z"/>
        <path fill="#fbbc04" d="M176.45 50.5c0 13.81-10.79 23.98-24.02 23.98s-24.02-10.17-24.02-23.98 10.79-23.98 24.02-23.98 24.02 10.08 24.02 23.98Zm-10.52 0c0-8.63-6.26-14.53-13.51-14.53s-13.51 5.9-13.51 14.53 6.26 14.53 13.51 14.53 13.51-5.99 13.51-14.53Z"/>
        <path fill="#4285f4" d="M226.47 27.97v43.05c0 17.71-10.44 24.98-22.78 24.98-11.62 0-18.61-7.81-21.24-14.17l9.17-3.81c1.63 3.91 5.63 8.54 12.07 8.54 7.9 0 12.8-4.9 12.8-14.08v-3.45h-.36c-2.36 2.91-6.9 5.45-12.62 5.45-11.98 0-22.96-10.44-22.96-23.89s10.98-24.07 22.96-24.07c5.72 0 10.26 2.54 12.62 5.36h.36v-3.91h9.98Zm-9.26 22.62c0-8.45-5.63-14.62-12.8-14.62s-13.34 6.18-13.34 14.62 6.08 14.44 13.34 14.44 12.8-6.09 12.8-14.44Z"/>
        <path fill="#34a853" d="M244.57 2.54v70.48h-10.53V2.54h10.53Z"/>
        <path fill="#ea4335" d="m285.38 58.4 8.17 5.45a23.83 23.83 0 0 1-19.97 10.63c-13.61 0-23.78-10.54-23.78-23.98 0-14.26 10.26-23.98 22.6-23.98s18.51 9.9 20.51 15.26L294 44.5l-32.04 13.26c2.45 4.81 6.26 7.27 11.62 7.27s9.08-2.63 11.8-6.63Zm-25.14-8.63 21.42-8.9c-1.18-3-4.72-5.09-8.89-5.09-5.35 0-12.8 4.72-12.52 13.99Z"/>
      </svg>
      <div class="footer__cluster cluster flex-1 gap-top-300 flow-space-300 lg:gap-top-0 lg:gap-left-500 lg:flow-space-500">
        <ul role="list">
          <li role="listitem"><a class="footer__link" href="https://www.google.com/chrome/">Chrome</a></li>
          <li role="listitem"><a class="footer__link" href="https://firebase.google.com">Firebase</a></li>
          <li role="listitem"><a class="footer__link" href="https://developers.generativeai.google/">Generative AI</a></li>
          <li role="listitem"><a class="footer__link" href="https://developers.google.com/products">{{ 'i18n.footer.all_products' | i18n(locale) }}</a></li>
          <li role="listitem"><a class="footer__link" href="https://policies.google.com/privacy">{{ 'i18n.footer.privacy' | i18n(locale) }}</a></li>
          <li role="listitem"><a class="footer__link" href="https://policies.google.com/terms">{{ 'i18n.footer.terms' | i18n(locale) }}</a></li>
        </ul>
      </div>
      <language-select current="{{ locale }}" supported="{{ site.locales }}"></language-select>
    </div>
    <div class="type--caption gap-top-500 color-secondary-text">
      {{ 'i18n.footer.content_license' | i18n(locale) }}
    </div>
  </div>

</footer>
